/** @type {import('tailwindcss').Config} */
module.exports = {
  // 核心配置
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}", // 指定需要扫描的文件
    "./public/index.html",
  ],
  darkMode: "class", // 或 'media'（基于系统偏好），这里设为手动切换（通过添加 .dark 类）
  corePlugins: {
    container: false, // 禁用默认容器（推荐手动实现更灵活）
  },

  // 主题扩展
  theme: {
    extend: {
      // 1. 颜色配置（覆盖/扩展默认颜色）
      colors: {
        primary: {
          DEFAULT: "#3B82F6", // 主色（默认蓝500）
          light: "#93C5FD", // 浅色
          dark: "#1D4ED8", // 深色
        },
        secondary: {
          DEFAULT: "#10B981", // 次色（默认绿500）
          dark: "#047857",
        },
        dark: {
          DEFAULT: "#1E293B", // 深色背景
          light: "#334155",
        },
      },

      // 2. 字体配置
      fontFamily: {
        sans: ['"Inter"', "sans-serif"], // 默认无衬线字体
        mono: ['"Fira Code"', "monospace"], // 代码字体
      },

      // 3. 间距扩展（基于默认的0.25rem倍数系统）
      spacing: {
        13: "3.25rem", // 新增52px
        15: "3.75rem", // 新增60px
        128: "32rem", // 超大间距
      },

      // 4. 响应式断点（覆盖默认值）
      screens: {
        xs: "480px", // 新增超小屏幕
        "3xl": "1920px", // 新增超大屏幕
      },

      // 5. 其他实用扩展
      borderRadius: {
        xl: "0.75rem", // 覆盖默认的大圆角
        "4xl": "2rem",
      },
      boxShadow: {
        soft: "0 4px 14px 0 rgba(0, 0, 0, 0.08)", // 柔和阴影
      },
    },
  },

  // 插件配置
  plugins: [
    // require("@tailwindcss/forms"), // 表单样式插件
    // require("@tailwindcss/typography"), // 排版插件
    // require("tailwindcss-animate"), // 动画支持
    // 自定义插件示例
    // function ({ addUtilities }) {
    //   addUtilities({
    //     ".scrollbar-hide": {
    //       /* Chrome/Safari */
    //       "&::-webkit-scrollbar": { display: "none" },
    //       /* Firefox */
    //       "scrollbar-width": "none",
    //       /* IE/Edge */
    //       "-ms-overflow-style": "none",
    //     },
    //   });
    // },
  ],
};
